#index {
  color: #d3d6dd;
  background-color: #000000;
  width: 100%;
  height: 100vh;
 
  .bg {
    padding: 0.2rem 0.2rem 0 0.2rem;
    background-image: url("../assets/bg.png");
    background-size: cover;
    background-position: center center;
    
  }
    .button_{
    
      position: relative;
          
          
          text-align: center;
          
          font-size: .9vw;
          color: #0efcff;
          letter-spacing: .1vw;
          cursor: pointer;
          background: transparent;
          border-color: #0efcff;
          margin-bottom: .25vw;
    }
   
  .button_:hover::before {
      border-color: #0efcff;
      box-shadow: 1px 1px 3px 1px #0efcff inset;
  }
  .button_:active,.button_:focus, .button_:hover{
    border-color: #0efcff;
    box-shadow: 1px 1px 3px 1px #0efcff inset;
   }
    .e-dialog{
      background: rgba(1,12,10,0.2);
   background-image:url("../assets/diagbg.png");
}
.e-dialog ::v-deep .el-dialog__header{padding-top: 10px}
   .btnrlist{float: right}
    .about-wraper {
      position: absolute;
          top: 0%;
          left: 59%;
    }
  .host-body {
    .title {
 
       
       position: relative;
      top: .1vh;
      width: 100%;
      height: 5vh;
      background: url(../assets/top.png) no-repeat;
      background-size: 100%;
      text-align: center;
      line-height: 0.8rem;
      color: #0efcff;
      font-size: 1.2vw;
      letter-spacing: .1rem;

      .title-text {
        font-size: 0.35rem;
        position: absolute;
        
        left: 50%;
        transform: translate(-50%);
      }

      .title-bototm {
        position: absolute;
        bottom: -0.375rem;
        left: 50%;
        transform: translate(-50%);
      }
    }

    // 平行四边形
    .react-left {
      cursor: pointer;
      font-size: 0.225rem;
      width: 3.75rem;
      height: 0.625rem;
      line-height: 0.625rem;
      text-align: center;
      transform: skewX(-45deg);

      .react-after {
        position: absolute;
        right: -0.3125rem;
        top: 0;
        height: 0.625rem;
        width: 0.625rem;
        background-color: #0f1325;
        transform: skewX(45deg);
      }

      .text {
        display: inline-block;
        transform: skewX(45deg);
      }
    }

    .react-right {
      cursor: pointer;
      font-size: 0.225rem;
      width: 3.75rem;
      height: 0.625rem;
      line-height: 0.625rem;
      text-align: center;
      transform: skewX(45deg);

      .react-before {
        position: absolute;
        left: -0.3125rem;
        top: 0;
        height: 0.625rem;
        width: 0.625rem;
        background-color: #0f1325;
        transform: skewX(-45deg);
      }

      .text {
        display: inline-block;
        transform: skewX(-45deg);
      }
    }

    .body-box {
      margin-top: 0.2rem;
      display: flex;
      flex-direction: column;

      //下方区域的布局
      .content-box {
        display: grid;
        grid-template-columns: 2fr 3fr 5fr 3fr 2fr;
      }

      // 底部数据
      .bototm-box {
        margin-top: 0.125rem;
        display: grid;
        grid-template-columns: repeat(2, 50%);
      }
    }
  }
}
